<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #test1{
            position:absolute;
            width:100px;
            height:100px;
            background:#f00;
        }
    </style>
</head>
<body>

    <div id="test1"></div>
    <script>
        var test1=document.getElementById("test1");
        /** 给element添加resize事件, 没有 e 事件参数
         * @param {Element} _element
         * @param {function} _listener
         */
        function addResizeEvent(_element,_listener){            
            if(_element.resizeMarkFlag){
                element.resizeListener.push(_listener);
            }
            else{
                _element.resizeListener=[_listener];
                var mark1 =document.createElement("div"),
                    mark1C=document.createElement("div"),
                    mark2C=document.createElement("div");
                var lowWidth=_element.offsetWidth||0;
                var lowHeight=_element.offsetHeight||0;
                var maxWidth=lowWidth*999,maxHeight=lowWidth*999;
                mark1.style.cssText="position:absolute;top:0;left:0;width:100%;height:100%;z-index=-10000;overflow:hidden;visibility:hidden;";

                mark1C.style.cssText="width:300%;height:300%;";
                mark2C.style.cssText=`width:${maxWidth}px;height:${maxHeight}px;`;
                
                var mark2=mark1.cloneNode(false);
                
                mark1.appendChild(mark1C);
                mark2.appendChild(mark2C);
                _element.appendChild(mark1);
                _element.appendChild(mark2);

                mark1.scrollTop=maxHeight;
                mark1.scrollLeft=maxWidth;

                mark1.markBrother=mark2;
                mark2.markBrother=mark1;

                function m_Resize(){
                    if(lowWidth!=_element.offsetWidth||lowHeight!=_element.offsetHeight){
                                                lowWidth=_element.offsetWidth;
                        lowHeight=_element.offsetHeight;
                        for(var i=_element.resizeListener.length-1;i>=0;--i){
                            _element.resizeListener[i].call(_element);
                        }
                        if(maxWidth<lowWidth||maxHeight<lowWidth)
                        maxWidth=lowWidth*100,maxHeight=lowWidth*100;
                        mark2C.style.cssText=`width:${maxWidth}px;height:${maxHeight}px;`;
                    }
                }
                function m_Scroll(e){
                    m_Resize();
                    this.markBrother.scrollTop=maxHeight;
                    this.markBrother.scrollLeft=maxWidth;
                }
                mark1.onscroll=mark2.onscroll=m_scroll;
                _element.resizeMarkFlag=true;
                _element.resizeMark1=mark1;
                _element.resizeMark2=mark2;
            }
        }
        addResizeEvent(test1,function(){
            console.log(1);
        }
        )
    </script>
</body>
</html>